<style scoped>
  .flex-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .flex-form>div {
    min-width: 546px;
    margin-bottom: 16px;
  }

  .flex-form .line {
    height: 20px;
    border-top: 1px solid #cacaca;
    width: 100%;
  }

  .flex-form .title {
    width: 100%;
    padding-left: 16px;
  }

  .dialog-form>div {
    margin-bottom: 8px;
  }

  .error-table {
    border: 1px solid #f56c6c;
  }

  .show-error {
    display: block;
    width: 100%;
    color: #f56c6c;
    margin-left: 16px;
  }

</style>
<style>
  .flex-form .upload-file.full {
    width: 100%;
  }

</style>
<template>
  <div class="tab_content">
    <div :class="(readonly?'read-only-form':'') + ' finance-class flex-form'">
      <div class="title">企业资质
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 16px" @click="formShow = true;resetForm('ruleForm')" v-if="!readonly">新增</el-button>
      </div>
      <el-table :data="productList" border style="margin: 0 16px" :class="{'error-table' : isError}">
        <el-table-column label="操作" v-if="!readonly">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteProduct(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="资质名称" prop="aptitudesName"></el-table-column>
        <el-table-column label="资质编号" prop="aptitudesNo"></el-table-column>
        <el-table-column label="颁发机构" prop="issueOrg"></el-table-column>
        <el-table-column label="认证日期" prop="beginDate"></el-table-column>
        <el-table-column label="失效日期" prop="endDate"></el-table-column>
        <el-table-column label="附件">
          <template slot-scope="scope">
            <el-button type="text" @click="downloadFile(scope.row.url, scope.row.sFileName)">{{scope.row.sFileName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="notes"></el-table-column>
      </el-table>
      <div v-if="isError" style="margin-top:16px; margin-bottom:0" :class="{'show-error': isError}">请添加企业资质</div>
      <div class="line"></div>
      <div class="title">产品资质
        <el-button type="primary" icon="el-icon-plus" style="margin-left: 16px" @click="patentShow = true;resetForm('patentForm')" v-if="!readonly">新增</el-button>
      </div>
      <el-table :data="patentList" border style="margin: 0 16px 16px 16px" :class="{'error-table' : isError2}">
        <el-table-column label="操作" v-if="!readonly">
          <template slot-scope="scope">
            <el-button type="text" @click="deletePatent(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" prop="productName"></el-table-column>
        <el-table-column label="资质名称" prop="aptitudesName"></el-table-column>
        <el-table-column label="资质编号" prop="aptitudesNo"></el-table-column>
        <el-table-column label="颁发机构" prop="issueOrg"></el-table-column>
        <el-table-column label="认证日期" prop="beginDate"></el-table-column>
        <el-table-column label="失效日期" prop="endDate"></el-table-column>
        <el-table-column label="附件">
          <template slot-scope="scope">
            <el-button type="text" @click="downloadFile(scope.row.url, scope.row.sFileName)">{{scope.row.sFileName}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="notes"></el-table-column>
      </el-table>
      <div v-if="isError2" style="margin-bottom:16px" :class="{'show-error': isError2}">请添加产品资质</div>

      <!--添加产品-->
      <dialog-ext title="新增" v-model="formShow" @submitForm="submitForm" @resetDialog="resetForm('ruleForm')" width="800px">
        <el-form :model="form" ref="ruleForm" label-width="140px" class="dialog-form">
          <el-form-item label="资质名称" prop="aptitudesName">
            <el-input v-model="form.aptitudesName"></el-input>
          </el-form-item>
          <el-form-item label="资质编号" prop="aptitudesNo">
            <el-input v-model="form.aptitudesNo"></el-input>
          </el-form-item>
          <el-form-item label="颁发机构" prop="issueOrg">
            <el-input v-model="form.issueOrg"></el-input>
          </el-form-item>
          <el-form-item label="认证日期" prop="beginDate">
            <el-date-picker type="date" v-model="form.beginDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%" :picker-options="pickerOptions1"></el-date-picker>
          </el-form-item>
          <el-form-item label="失效日期" prop="endDate">
            <el-date-picker type="date" v-model="form.endDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%" :picker-options="pickerOptions2"></el-date-picker>
          </el-form-item>
          <el-form-item label="附件">
            <el-upload class="upload-file full" ref="aptitudeFile1" name="businessScopeFile" :action="this.lib.config.host.vendorMgt + '/vendormgt/questionary/aptitude/uploadAptitudeFile'"
              multiple :limit="1" :auto-upload="true" :data="{aptitudeFileUrl:'', aptitudeFileName:''}" :on-success="uploadFileSuccess">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注" prop="notes">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="form.notes">
            </el-input>
          </el-form-item>
        </el-form>
      </dialog-ext>

      <!--添加专利-->
      <dialog-ext title="新增" v-model="patentShow" @submitForm="submitPatent" @resetDialog="resetForm('patentForm')" width="800px">
        <el-form :model="patent" ref="patentForm" label-width="140px" class="dialog-form">
          <el-form-item label="产品名称" prop="productName">
            <el-input v-model="patent.productName"></el-input>
          </el-form-item>
          <el-form-item label="资质名称" prop="aptitudesName">
            <el-input v-model="patent.aptitudesName"></el-input>
          </el-form-item>
          <el-form-item label="资质编号" prop="aptitudesNo">
            <el-input v-model="patent.aptitudesNo"></el-input>
          </el-form-item>
          <el-form-item label="颁发机构" prop="issueOrg">
            <el-input v-model="patent.issueOrg"></el-input>
          </el-form-item>
          <el-form-item label="认证日期" prop="beginDate">
            <el-date-picker type="date" v-model="patent.beginDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%" :picker-options="pickerOptions3"></el-date-picker>
          </el-form-item>
          <el-form-item label="失效日期" prop="endDate">
            <el-date-picker type="date" v-model="patent.endDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%" :picker-options="pickerOptions4"></el-date-picker>
          </el-form-item>
          <el-form-item label="附件">
            <el-upload class="upload-file full" ref="aptitudeFile2" name="businessScopeFile" :action="this.lib.config.host.vendorMgt + '/vendormgt/questionary/aptitude/uploadAptitudeFile'"
              multiple :limit="1" :auto-upload="true" :data="{aptitudeFileUrl:'', aptitudeFileName:''}" :on-success="uploadPatentFileSuccess">
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注" prop="notes">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="patent.notes">
            </el-input>
          </el-form-item>
        </el-form>
      </dialog-ext>
    </div>
  </div>
</template>
<script>
  import DialogExt from '../../../common/dialog-ext/dialog-ext';
  export default {
    data() {
      return {
        form: {
          aptitudesName: '',
          aptitudesNo: '',
          issueOrg: '',
          beginDate: '',
          endDate: '',
          notes: '',
          sFileName: '',
          url: ''
        },
        patent: {
          productName: '',
          aptitudesName: '',
          aptitudesNo: '',
          issueOrg: '',
          beginDate: '',
          endDate: '',
          notes: '',
          sFileName: '',
          url: ''
        },
        formShow: false,
        patentShow: false,
        productList: [],
        patentList: [],
        isError: false,
        isError2: false
      }
    },
    components: {
      DialogExt
    },
    created() {
      let _this = this;
      this.pickerOptions1 = {
        disabledDate(time) {
          return time.getTime() > new Date(_this.form.endDate);
        }
      };
      this.pickerOptions2 = {
        disabledDate(time) {
          return time.getTime() < new Date(_this.form.beginDate);
        }
      };
      this.pickerOptions3 = {
        disabledDate(time) {
          return time.getTime() > new Date(_this.patent.endDate);
        }
      };
      this.pickerOptions4 = {
        disabledDate(time) {
          return time.getTime() < new Date(_this.patent.beginDate);
        }
      };
    },
    props: {
      readonly: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      onExceed(files, fileList){
        let f = {
          name: files[0].name,
          percentage: 0,
          raw: files[0],
          size: files[0].size,
          status: "ready",
          url: URL.createObjectURL(files[0])
        };
        fileList.splice(0, 1, f);
      },
      // downloadFile(url, sFileName) {
      //   downloadUtil.download(this.lib.config.host.vendorMgt + url, sFileName, {});
      // },
      initData(vendorId) {
        let _this = this;
        this.axios.post(this.lib.config.host.vendorMgt +
          '/vendormgt/questionary/aptitude/query?aptitudesType=1&vendorId=' + vendorId +
          '&moduleCode=VD_DEVELOP&businessId=' + vendorId).then((res) => {
          if (res.data.resultMap.VendorAptitude instanceof Array && res.data.resultMap.VendorAptitude.length > 0) {
            _this.productList = [];
            res.data.resultMap.VendorAptitude.forEach((item) => {
              let tempData = {};
              for (let key in _this.form) {
                if (item[key]) {
                  tempData[key] = item[key];
                }
              }
              _this.productList.push(tempData);
            });
          }
        });

        this.axios.post(this.lib.config.host.vendorMgt +
          '/vendormgt/questionary/aptitude/query?aptitudesType=2&vendorId=' + vendorId +
          '&moduleCode=VD_DEVELOP&businessId=' + vendorId).then((res) => {
          if (res.data.resultMap.VendorAptitude instanceof Array && res.data.resultMap.VendorAptitude.length > 0) {
            _this.patentList = [];
            res.data.resultMap.VendorAptitude.forEach((item) => {
              let tempData = {};
              for (let key in _this.patent) {
                if (item[key]) {
                  tempData[key] = item[key];
                }
              }
              _this.patentList.push(tempData);
            });
          }
        });
      },
      uploadFileSuccess(response, file, fileList) {
        this.form.sFileName = response.resultMap.aptitudeFileName;
        this.form.url = response.resultMap.aptitudeFileUrl;
      },
      uploadPatentFileSuccess(response, file, fileList) {
        this.patent.sFileName = response.resultMap.aptitudeFileName;
        this.patent.url = response.resultMap.aptitudeFileUrl;
      },
      deleteProduct(index) {
        this.productList.splice(index, 1);
        this.checkList(1);
      },
      submitForm(callBack) {
        this.productList.push(JSON.parse(JSON.stringify(this.form)));
        this.resetForm('ruleForm');
        this.checkList(1);
        callBack(true);
      },
      submitPatent(callBack) {
        this.patentList.push(JSON.parse(JSON.stringify(this.patent)));
        this.resetForm('patentForm');
        this.checkList(2);
        callBack(true);
      },
      resetForm(ref) {
        if (this.$refs[ref]) {
          this.$refs[ref].resetFields();
          if (ref === 'ruleForm') {
            this.$refs['aptitudeFile1'].clearFiles();
          }
          if (ref === 'patentForm') {
            this.$refs['aptitudeFile2'].clearFiles();
          }
        }
      },
      deletePatent(index) {
        this.patentList.splice(index, 1);
        this.checkList(2);
      },
      getData(isCheck) {
        return new Promise((resolve, reject) => {
          resolve({
            data: {
              cmpAptitudeJsonStr: JSON.stringify(this.productList),
              proAptitudeJsonStr: JSON.stringify(this.patentList)
            },
            check: isCheck ? this.checkList() : true
          });
        });
      },
      checkList(n) {
        let flag = true;
        if ((n === 1 || !n) && this.productList.length === 0) {
          this.isError = true;
          flag = false;
        } else {
          this.isError = false;
        }
        if ((n === 2 || !n) && this.patentList.length === 0) {
          this.isError2 = true;
          flag = false;
        } else {
          this.isError2 = false;
        }
        return flag;
      }
    }
  }

</script>
